Envío de los datos de un formulario HTML

Si se simplifica el funcionamiento de las páginas web se podría definir como la metodología "cliente/servidor", la cual consiste en que un "cliente" (la mayoría de los casos un navegador) realiza una solicitud al servidor solicitando los datos requeridos para llevar a cabo una acción; a su vez, el servidor retorna una respuesta hacia el cliente con dichos datos. Por su lado, todas estas consultas y respuestas son enviadas a través de ciertos "protocolos" de transmisión de datos; en general, uno de los más simples y estandarizados en la web es el protocolo HTTP.

En ese sentido, un formulario no es más que un mecanismo simple para que el usuario pueda realizar una consulta o enviar datos hacia un servidor a través del protocolo HTTP; de hecho, básicamente todos los atributos de un formulario van enfocados a configurar la solicitud que se realizará. A su vez, los formularios poseen dos atributos en particular los cuales están enfocados en definir de qué forma se enviarán los datos hacia el servidor; estos atributos son:

Atributo Action

Este atributo define hacia dónde se enviarán los datos, su valor debe de ser una URL relativa o absoluta válida; en caso de que esta URL no sea definida, entonces los datos serán enviados por defecto a la ubicación de la página que contiene el formulario, es decir, a la página actual.

A continuación se muestran las tres formas en las que se puede indicar la URL:

Uso de una URL absoluta:
Uso de una URL relativa
Caso de un formulario en el que no se especifica el atributo "action"

En el servidor, el valor del atributo "action" debe ser un archivo capaz de manejar los datos entrantes, lo que incluye realizar la validación del lado del servidor; luego de esto, el servidor responde a la consulta ya sea enviando los datos solicitados, recargando la página o realizando una acción en esta.

En sí, los datos provenientes de todos aquellos controladores que no sean archivos se envían en pares de "name=value", es decir, el valor de los datos es enviado en conjunto al nombre del elemento del que provienen.

Atributo Method

Este atributo define el método con el cual se enviarán los datos, esto debido a que el protocolo HTTP proporciona varias formas de enviar una solicitud; entre esos diversos métodos, en la actualidad los más difundidos son el método "GET" y el "POST", cada uno de estos con sus propias ventajas y desventajas, así como marcadas diferencias a la hora de realizar las consultas HTTP.

Para entender adecuadamente las diferencias entre ambos es necesario recalcar el funcionamiento del protocolo HTTP. Cada vez que se desea acceder a un recurso web, el navegador envía una consulta HTTP a la URL que alberga los archivos en cuestión; las consultas están compuestas por dos partes diferentes:

El encabezado: Está compuesto por los metadatos globales sobre las capacidades del navegador.
Un cuerpo: Contiene la información necesaria para que el servidor procese la solicitud específica que se está realizando.

Método GET

Este método de envío de datos se utiliza principalmente para aquellos casos en los que se realiza una solicitud de datos al servidor; en estos casos, el navegador envía una consulta con un cuerpo vacío, lo que resulta en que cualquier dato de un formulario que se envíe a través de este método será indexado a la URL destino. Es decir, en el caso de que se envíe información con un método GET, estos datos se enviarán a través de la URL por lo que serán visibles, lo que no lo hace una buena opción para enviar información delicada. Un ejemplo de uso sería el siguiente:

En base a este HTML:

Se obtendría este resultado:

A la hora de anexar los datos a la URL existe un formato determinado: al culminar la dirección URL destino se añade un ? seguido de los datos en cadenas "nombre/valor" cada uno separado por un "ampersand (&)". De ese modo es que se envían los datos a través del método GET.

Por lo tanto, la visualización de los datos en la consulta GET sería:
Método POST

Este método de envío de datos se diferencia del GET en que los datos enviados con la solicitud no se anexarán a la URL ni tampoco se podrán visualizar en algún otro lugar, ya que en el planteamiento de este método sí se tienen en cuenta los datos enviados al servidor, los cuales son enviados dentro del cuerpo de la consulta. Es decir, que este método está pensado para emplearse en todos aquellos casos en los que sea necesario enviar datos de carácter privado al servidor, como por ejemplo las contraseñas de acceso.

Como ejemplo vamos a tomar el HTML mostrado anteriormente pero con el valor "POST" en el atributo "method":

Por lo tanto, la visualización de la consulta sería la siguiente:

Los datos enviados se siguen enviando en los conjuntos "nombre/valor", al igual que se sigue utilizando el "ampersand (&)" para delimitarlos; por otro lado, el encabezado Content-Length indica el tamaño del cuerpo y el encabezado Content-Type indica el tipo de recurso enviado al servidor.

Nota: Es posible realizar una solicitud al servidor utilizando el método HTTPS (HTTP encriptado) desde una página no segura sin mayor inconveniente, ya que el HTTPS cifra los datos al enviarlos. Sin embargo, en el caso de que desde una página segura se pretenda realizar una consulta desde el protocolo HTTP sin encriptar los datos, todos los navegadores deberían de disparar una alerta al usuario, ya que los datos no encriptados son vulnerables a ser interceptados por terceros.

Nota: Si se da la necesidad de enviar una gran cantidad de datos a un servidor, lo más recomendable es emplear el método POST, ya que algunos navegadores y servidores asignan un límite a las URL que aceptan; y ya que este se trata del mecanismo para enviar los datos con el método GET, se podría producir un error en estos casos.

Visualizar Consultas HTTP

Por lo general, las consultas HTTP de una página web no se muestran al usuario en ningún punto del envío de datos; por lo tanto, para poder visualizarlas es necesario el uso de herramientas especializadas como lo son Firefox Network Monitor y Chrome DevTools. Sin embargo, pese a que estas herramientas ofrecen una variedad de opciones al emplearlas en cuanto a lo que es la visualización de las consultas HTTP, también es posible visualizarlas desde las "herramientas de desarrollador" de Google Chrome; los pasos para poder visualizar las consultas son los siguientes:

Realizar clic derecho y se selecciona "inspeccionar elemento".
Se selecciona la pestaña "Red (Network)".
Se selecciona el filtro "Todo (All)".
Se refresca la página.
Se selecciona la consulta HTTP en el panel izquierdo; los datos se mostrarán como una ventana emergente.

Un ejemplo de esto sería:

Visualizar Consultas HTTP del lado del servidor

Es necesario recordar que HTML es un lenguaje de marcado limitado a estructurar páginas web, por lo tanto se trata de un lenguaje básico en el ámbito frontend. No obstante, dado que los datos son enviados a través del protocolo HTTP desde el formulario de nuestra página hacia el servidor, visualizar los datos recibidos en este no está dentro de las capacidades de HTML, ya que este lenguaje únicamente es interpretado por los navegadores. Por lo tanto, para visualizar e interactuar con los datos de la consulta es necesario utilizar otros lenguajes de programación, en particular aquellos que tengan un carácter Backend. Un ejemplo de estos son:

Python
Node.js
PHP
Ruby
Java

A su vez, estos lenguajes requieren de otro elemento llamado entorno de trabajo, el cual es por así decirlo un "hábitat" en el cual los lenguajes pueden interpretarse por el computador, a la vez que brindan múltiples herramientas y opciones útiles a la hora de trabajar.

Django para Python, o también se puede usar Flask; sin embargo, Django ofrece más herramientas y opciones.
Express para Node.js
Laravel para PHP
Ruby On Rails para Ruby
Spring Boot para Java

Caso Especial

Si se da el caso de que sea necesario enviar un archivo con un formulario HTML, tendremos que tomar en cuenta cierto aspecto del protocolo HTTP: este se trata de un protocolo de texto. Esto es ideal cuando enviamos datos comunes ya que la mayoría de estos también son datos de texto; sin embargo, la cosa cambia cuando enviamos un archivo, ya que este se trata de datos binarios. Por lo tanto, es necesario cumplir con ciertos requisitos antes de que sea posible realizar el envío del archivo en cuestión.

Atributo Enctype

Para este tipo de casos existe el atributo "enctype". Este atributo es realmente importante ya que se encarga de definir el valor del encabezado del tipo de contenido incluido en la solicitud HTTP; en otras palabras, le indica al servidor qué tipo de datos está recibiendo. Su valor por defecto es application/x-www-form-urlencoded, lo que significa "estos son datos de formularios que han sido codificados en parámetros de URL".

Por lo tanto, si se desea enviar archivos a través de un formulario HTML es necesario realizar tres pasos adicionales:

Enviarlo a través del método POST, ya que no es posible codificar un archivo a formato URL para enviarlo a través del método GET.
Definir el valor del atributo "enctype" como multipart/form-data, ya que de este modo los datos se dividirán en varias partes: una para cada archivo enviado, a la vez que una para los datos de texto que pudiesen ser enviados con el formulario.
El tercero es el más lógico: se trata de incluir en el formulario al menos un controlador del tipo archivo (input type="file") para permitir que los usuarios seleccionen los archivos por enviar.

Por ejemplo:

Nota: Si es necesario, es posible configurar al servidor con un límite de tamaño en los archivos por enviar para evitar que los usuarios puedan intentar abusar de la página.

Seguridad

Siempre que se realice algún tipo de envío de datos hacia nuestro servidor, esto se puede convertir en una vulnerabilidad que terceros pudiesen aprovechar para atacar nuestra web; la vulnerabilidad en sí no proviene del formulario HTML, sino que proviene del cómo son manejados los datos por nuestro servidor.

Pese a que la seguridad web no es un tema que HTML sea capaz de abordar, existen ciertas reglas al plantearse la seguridad de una web. La base de todo es desconfiar de todos los usuarios, incluyéndonos a nosotros; después de todo, incluso nuestro usuario pudiese llegar a ser suplantado. Aparte de eso, es necesario considerar que los formularios son los centros de la mayoría de ataques a una web, por lo que todos los datos que sean enviados al servidor deben de ser chequeados sin ninguna excepción.

Las tres reglas son:

Cuidado con los caracteres peligrosos: ¿Qué evita que se envíe código malicioso al servidor? Por ello es que se recomienda delimitar los caracteres disponibles para nuestro formulario. Los caracteres peligrosos pueden variar en función de qué tecnología se ejecute en nuestro servidor; aun así, es muy importante tener gran precaución con las secuencias de caracteres que pudiesen llegar a ser código ejecutable.
Delimitar la cantidad de datos: Otra medida a tomar es delimitar el espacio disponible para ingresar texto a únicamente el necesario acorde a los datos que estamos solicitando al usuario.
Almacenar los archivos en entornos aislados: Un gran peligro para una página web son los archivos maliciosos; por ello se recomienda albergarlos en un servidor diferente, permitiendo su acceso a través de un subdominio o incluso a través de un dominio completamente diferente.

Siguiendo estas tres reglas es posible protegerse contra la mayoría de las vulnerabilidades de una página web; sin embargo, no es suficiente con esto. Lo recomendable es siempre buscar un tercero experimentado que chequee la seguridad de la página, ya que de ese modo se pueden encontrar nuevos puntos débiles de los cuales antes no se tenía conciencia.

Nota: se puede leer más acerca de la seguridad de nuestra web en este enlace

Método GET

Método POST